1 00:00:00,550 --> 00:00:05,800 Now let's capture this event on the other side, on the client side, and open up our guy. 2 00:00:05,830 --> 00:00:10,310 So I'm going to go to my my zombie game, the main game, the workspace. 3 00:00:10,330 --> 00:00:13,000 I'm going to go down to starter g UI. 4 00:00:13,740 --> 00:00:19,350 You might have to scroll a little bit, screen g UI, hit the plus, add a frame. 5 00:00:19,360 --> 00:00:24,180 The frame I'm going to call shop, frame shop. 6 00:00:24,310 --> 00:00:28,120 From here we go and Anchor point. 7 00:00:28,120 --> 00:00:29,740 I want to center this when I open it. 8 00:00:29,740 --> 00:00:32,150 So I'm going to do this at 0.5 and point five. 9 00:00:32,170 --> 00:00:36,130 So my anchor point, you can see that moved up a little bit because the anchor point is in the center 10 00:00:36,130 --> 00:00:41,710 of the component, the frame, and I'll go to position where the position we want to center it. 11 00:00:41,710 --> 00:00:51,100 So I'm going to do 0.5 on the x comma, zero pixel offset comma 0.5 and the Y comma, zero pixel offset. 12 00:00:51,130 --> 00:00:54,630 Notice I didn't have to put the little curly brackets in there for that to work. 13 00:00:54,640 --> 00:00:56,260 I'm going to hit the enter boom. 14 00:00:56,260 --> 00:00:57,190 We're in the center. 15 00:00:57,820 --> 00:00:58,300 All right. 16 00:00:58,300 --> 00:01:04,120 Now I can change my size without changing my position because the anchor point is in the center and 17 00:01:04,120 --> 00:01:07,720 the size will increase based on where the anchor point is. 18 00:01:07,720 --> 00:01:13,780 If the anchor point was up here on the top or anywhere else other than the center, if I change my my 19 00:01:13,780 --> 00:01:19,750 size and I have to change my position to recenter it, just something a little helpful to know. 20 00:01:19,960 --> 00:01:20,320 All right. 21 00:01:20,320 --> 00:01:30,970 So size I'll make that maybe point I'll do point four on the x zero pixel offset and 0.5 on the Y zero 22 00:01:30,970 --> 00:01:32,130 pixel offset. 23 00:01:32,140 --> 00:01:33,030 How does that look? 24 00:01:33,040 --> 00:01:34,240 That's pretty good. 25 00:01:34,240 --> 00:01:35,260 I like that. 26 00:01:36,370 --> 00:01:40,960 Now, let's try and put a script on that so we can capture the event and open this up. 27 00:01:40,960 --> 00:01:43,330 I'm going to keep this visible for now. 28 00:01:43,330 --> 00:01:49,000 I could make it invisible by hitting this check, but I'm just going to do it with code so that I can 29 00:01:49,000 --> 00:01:51,450 keep working on it and not have to check and uncheck it. 30 00:01:51,460 --> 00:01:53,980 Hit the plus right here on the shop frame. 31 00:01:53,980 --> 00:01:55,630 Add a local script. 32 00:01:55,630 --> 00:02:00,760 Right, Because we're on the client side and let's see, what should we call this? 33 00:02:00,760 --> 00:02:02,500 How about shop script? 34 00:02:02,620 --> 00:02:07,660 I think I might put everything in this script like no code on buttons and stuff. 35 00:02:07,660 --> 00:02:11,470 Just have the main shop script work for everything. 36 00:02:12,190 --> 00:02:14,860 I need a variable for my shot, my frame. 37 00:02:14,860 --> 00:02:20,080 So I'll just call that shop frame and that's going to equal script parent. 38 00:02:20,170 --> 00:02:31,030 I'm going to need replicated storage, local whoops, local R's game, get service, replicated storage 39 00:02:31,870 --> 00:02:38,230 and I need my shop re my remote event and that is in replicated storage. 40 00:02:38,230 --> 00:02:41,500 Wait for child shop r e. 41 00:02:42,160 --> 00:02:45,820 All right now the shop r e is going to come over from the server side. 42 00:02:45,820 --> 00:02:47,100 It's going to be a client event. 43 00:02:47,110 --> 00:02:56,620 So I'm going to say shop r e dot on client event colon connect function. 44 00:02:57,870 --> 00:03:04,180 We don't need any arguments here and we'll do a shop frame dot. 45 00:03:04,200 --> 00:03:06,720 Visible will equal. 46 00:03:06,810 --> 00:03:07,490 True. 47 00:03:07,500 --> 00:03:10,710 Now remember, it is visible now. 48 00:03:10,710 --> 00:03:17,250 So what I'm going to do is I'll just copy this right here and then right after I initialize my shop 49 00:03:17,250 --> 00:03:23,100 frame, I'll just make that visible equals the false right now. 50 00:03:23,340 --> 00:03:25,620 It'll turn it off if I forget. 51 00:03:25,620 --> 00:03:27,450 And then I don't have to replay my game. 52 00:03:28,590 --> 00:03:31,440 Let's see, We should not see a shop frame. 53 00:03:31,440 --> 00:03:37,590 We should click this little bell wallah, although we can't close this yet. 54 00:03:37,590 --> 00:03:40,920 So let's do that now and then we'll make the little ding sound. 55 00:03:40,920 --> 00:03:41,600 Two. 56 00:03:42,540 --> 00:03:45,900 I turn my game off and I selected the shop frame. 57 00:03:45,900 --> 00:03:49,260 If yours is not visible, just select frame and then go down fine. 58 00:03:49,260 --> 00:03:49,710 Visible. 59 00:03:49,710 --> 00:03:53,520 Check it so you can turn it on and off because you might want to work on other stuff. 60 00:03:53,760 --> 00:03:59,130 All right, so on the shop frame, let's add a bar across the top with a little X on the corner. 61 00:03:59,130 --> 00:04:01,260 That's a typical way of closing window. 62 00:04:01,440 --> 00:04:05,750 We'll go to shop, frame, hit the plus F for frame. 63 00:04:05,760 --> 00:04:06,690 There we go. 64 00:04:06,690 --> 00:04:08,970 This is going to be a frame to the top bar. 65 00:04:09,180 --> 00:04:16,110 I call this top bar FRM and maybe we'll make it a different color so we could see it while we're working 66 00:04:16,110 --> 00:04:16,650 on it. 67 00:04:17,790 --> 00:04:18,750 Maybe purple. 68 00:04:19,430 --> 00:04:20,360 Cool. 69 00:04:20,420 --> 00:04:23,450 And I wanted to stretch across the top. 70 00:04:23,540 --> 00:04:24,970 So we'll go on down. 71 00:04:24,980 --> 00:04:26,510 Position is good. 72 00:04:26,690 --> 00:04:28,430 Let's do size. 73 00:04:28,610 --> 00:04:32,010 So size, I'm going to scale one on the X. 74 00:04:32,010 --> 00:04:40,790 So that's all the way across zero pixel offset and comma 0.1 on the Y zero pixel offset. 75 00:04:40,790 --> 00:04:44,450 So we'll make it 10% the size of the window. 76 00:04:44,930 --> 00:04:45,170 All right. 77 00:04:45,170 --> 00:04:48,450 Now let's get a little a little button here that we can press. 78 00:04:48,470 --> 00:04:53,030 So on the top frame on the top bar frame, hit the plus. 79 00:04:53,770 --> 00:04:57,460 Text button and let's call this close button. 80 00:05:00,140 --> 00:05:05,750 All right, Now I want to make my anchor point right here so I can anchor it right here. 81 00:05:05,750 --> 00:05:08,030 And that way the button is going to be inside my frame. 82 00:05:08,030 --> 00:05:10,790 So all my close button frame. 83 00:05:11,680 --> 00:05:13,750 Let's see you go to the anchor point. 84 00:05:13,750 --> 00:05:14,530 Where is that? 85 00:05:14,530 --> 00:05:15,640 It's up higher. 86 00:05:16,900 --> 00:05:18,220 I'm going to make that one. 87 00:05:18,220 --> 00:05:22,390 So that's all the way on the left and then 0.5 and the Y. 88 00:05:22,510 --> 00:05:24,400 So that's the anchor point. 89 00:05:24,400 --> 00:05:26,920 And now we have to move the anchor point to here. 90 00:05:27,340 --> 00:05:29,200 We'll go to position. 91 00:05:30,490 --> 00:05:31,540 Here we go. 92 00:05:31,750 --> 00:05:33,400 We'll make that one. 93 00:05:33,400 --> 00:05:35,110 So all the way to the left. 94 00:05:35,140 --> 00:05:38,770 Zero pixel offset, 0.5 and the Y. 95 00:05:38,770 --> 00:05:40,600 Zero pixel offset. 96 00:05:41,050 --> 00:05:41,920 There we go. 97 00:05:42,580 --> 00:05:48,890 Now, for size, I want it to be square, so I'm going to come down to size. 98 00:05:48,910 --> 00:05:54,190 My y is going to be the one that the Y height is going to be the one that I worry about the most. 99 00:05:54,220 --> 00:05:56,290 Let me open my size. 100 00:05:56,590 --> 00:06:05,110 And then on y, I'm going to do one and zero and I'm not going to try and get the scaling so that it's 101 00:06:05,110 --> 00:06:05,530 square. 102 00:06:05,530 --> 00:06:11,770 Because if people change the size of the window that didn't go, I want it to still remain square. 103 00:06:11,770 --> 00:06:14,250 So I'm going to hit this plus sign. 104 00:06:14,260 --> 00:06:19,990 I'm going to do UI, a four aspect ratio constraint. 105 00:06:20,500 --> 00:06:26,470 Then I'm going to click an aspect ratio constraint and then the aspect type. 106 00:06:27,180 --> 00:06:32,720 I'm going to change that to scale with parents size, and that should be pretty good. 107 00:06:32,730 --> 00:06:36,750 Now, when we change the size, we go to the View tab output. 108 00:06:36,750 --> 00:06:38,670 That's still a square. 109 00:06:39,510 --> 00:06:45,780 Let's go and change that output window and we need to change the name of this. 110 00:06:45,780 --> 00:06:47,640 We need to make it an X. 111 00:06:47,640 --> 00:06:50,970 So I'm going to go to my font face. 112 00:06:51,240 --> 00:06:52,710 I'll make that consistent. 113 00:06:53,100 --> 00:06:57,270 The comic one maybe bold it text. 114 00:06:57,270 --> 00:06:59,280 I'm going to make it a capital X. 115 00:07:00,450 --> 00:07:01,330 There we go. 116 00:07:01,350 --> 00:07:03,420 I'm going to scale it and make it bigger. 117 00:07:04,490 --> 00:07:05,030 That's pretty good. 118 00:07:05,060 --> 00:07:06,050 What does that look like? 119 00:07:06,080 --> 00:07:08,360 Yeah, let's make it a darker color. 120 00:07:08,360 --> 00:07:15,170 So go to your text button, scroll to the top, and then move down a little bit till you see background 121 00:07:15,170 --> 00:07:16,490 color three. 122 00:07:16,520 --> 00:07:20,300 We'll make it that same purple, but will make it darker. 123 00:07:22,600 --> 00:07:24,070 I think that looks pretty good. 124 00:07:25,590 --> 00:07:29,620 Let's add the code that will close our window when we press this button. 125 00:07:29,640 --> 00:07:35,490 Now we're going to put everything in the shop script, so I'm going to open that up and then I'll get 126 00:07:35,490 --> 00:07:37,500 a reference to the close button. 127 00:07:37,740 --> 00:07:41,460 Local close button. 128 00:07:41,490 --> 00:07:50,610 It's on the shop frame under the top bar frame, close button, and it's not going to have a lot of 129 00:07:50,610 --> 00:07:55,130 stuff in this function, so I'm just going to make an anonymous function. 130 00:07:55,140 --> 00:07:58,980 I'll do close button dot activated. 131 00:07:58,980 --> 00:08:01,730 So that's the event that fires when you activate it. 132 00:08:01,740 --> 00:08:06,300 It also works on mobile devices, so you should keep that in mind. 133 00:08:06,300 --> 00:08:13,500 So we have our activated, we'll hit connect function and then we're just going to get our shot frame 134 00:08:13,500 --> 00:08:15,180 instead of being visible. 135 00:08:15,210 --> 00:08:20,070 Control C Control V we're going to make it invisible. 136 00:08:20,070 --> 00:08:22,860 We also got to put a little ding there, but let's try this out. 137 00:08:22,860 --> 00:08:24,930 Make sure we don't make any mistakes. 138 00:08:25,310 --> 00:08:26,880 I'll go to my view tab. 139 00:08:27,690 --> 00:08:29,370 Now I hit my output. 140 00:08:30,930 --> 00:08:35,030 And click nice and it's still square. 141 00:08:35,040 --> 00:08:40,110 Even though we have our output window there, our little x is still square. 142 00:08:40,530 --> 00:08:41,310 Cool. 143 00:08:41,310 --> 00:08:42,270 And it closes. 144 00:08:42,270 --> 00:08:43,280 No errors. 145 00:08:43,290 --> 00:08:44,580 Let's go ahead and do our dang. 146 00:08:44,580 --> 00:08:51,020 Now turn this off and then I'll go to my zombie game. 147 00:08:51,030 --> 00:08:52,470 Let me close this. 148 00:08:53,010 --> 00:08:54,720 Open up our tool box. 149 00:08:54,840 --> 00:08:56,670 Where is the tool box? 150 00:08:56,670 --> 00:08:57,570 Home. 151 00:08:57,570 --> 00:08:59,070 Tool box. 152 00:08:59,340 --> 00:09:07,230 I'm going to go to Marketplace Audio and I forget what I searched on for the demo. 153 00:09:07,230 --> 00:09:08,700 I think it was like bell. 154 00:09:09,060 --> 00:09:10,740 Bell sound would have been good. 155 00:09:10,770 --> 00:09:12,000 Taco Bell. 156 00:09:12,000 --> 00:09:13,780 So you can pick whatever you want. 157 00:09:13,800 --> 00:09:17,670 Let me go through a few of these and then I'll unpause the video. 158 00:09:19,310 --> 00:09:19,640 All right. 159 00:09:19,640 --> 00:09:21,380 So I went through a couple of these. 160 00:09:21,380 --> 00:09:23,570 I think elevator bell is going to do it. 161 00:09:25,070 --> 00:09:26,750 Yeah, that's not bad. 162 00:09:26,900 --> 00:09:33,860 I'm going to select my shop frame, hit the insert, and then have it insert right under the shop frame. 163 00:09:33,860 --> 00:09:36,850 If it went somewhere else, you could just drag it to where you want it. 164 00:09:36,860 --> 00:09:46,610 So I'm going to just change it to Dang and I'll close my tool box, go to my shop script. 165 00:09:46,610 --> 00:09:48,650 And that's right here. 166 00:09:48,650 --> 00:09:58,070 If you if you lost it and we'll get a reference to our Belle local dang shop frame. 167 00:09:59,810 --> 00:10:00,710 Dang. 168 00:10:00,710 --> 00:10:02,450 We might want to do a wait for child. 169 00:10:02,450 --> 00:10:06,350 Let's do a wait for child and we'll do dang. 170 00:10:07,490 --> 00:10:07,970 All right. 171 00:10:07,970 --> 00:10:13,280 So when we open and close well, when we open, let's just do it on the open. 172 00:10:13,640 --> 00:10:18,560 So when we open up, we'll do our dang colon play. 173 00:10:18,560 --> 00:10:20,180 All right, let's see what we got. 174 00:10:27,020 --> 00:10:28,700 View output. 175 00:10:31,190 --> 00:10:32,000 Yeah. 176 00:10:32,810 --> 00:10:33,380 And close. 177 00:10:33,380 --> 00:10:34,520 We won't make a noise. 178 00:10:35,180 --> 00:10:36,140 That's pretty good.